<script setup lang="ts">
import { ref } from 'vue';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';

const { formRef, validate } = useNaiveForm();
const { createNumberRange } = useFormRules();

type Model = ManageApi.Parameters.Base;

const model = ref(createDefaultModel());

function createDefaultModel(): Model {
  /** 接口返回数据 */
  return {
    maxLoginNumber: 5,
    maxLockTime: 5,
    maxPageTimeout: 10
  };
}

type RuleKey = Extract<keyof Model, 'maxLoginNumber' | 'maxLockTime' | 'maxPageTimeout'>;

const rules: Record<RuleKey, CommonType.WithArray<App.Global.FormRule>> = {
  maxLoginNumber: createNumberRange(4, 8),
  maxLockTime: createNumberRange(5, 60),
  maxPageTimeout: createNumberRange(1, 60)
};

function handleInitModel() {
  model.value = createDefaultModel();
}

async function handleSubmit() {
  await validate();
  /** 请求接口 */
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :bordered="false" size="small" class="card-wrapper">
      <NForm ref="formRef" :model="model" :rules="rules">
        <NFormItem label="最大登录重试次数" path="maxLoginNumber">
          <NInputNumber v-model:value="model.maxLoginNumber" placeholder="请输入最大登录重试次数" />
        </NFormItem>
        <NFormItem label="登录失败锁定时间" path="maxLockTime">
          <NInputNumber v-model:value="model.maxLockTime" placeholder="请输入登录失败锁定时间" />
        </NFormItem>
        <NFormItem label="页面超时时间" path="maxPageTimeout">
          <NInputNumber v-model:value="model.maxPageTimeout" placeholder="请输入页面超时时间" />
        </NFormItem>
        <NFormItem>
          <NSpace>
            <NButton @click="handleInitModel">重置</NButton>
            <NButton @click="handleSubmit">提交</NButton>
          </NSpace>
        </NFormItem>
      </NForm>
    </NCard>
  </div>
</template>

<style lang="scss" scoped></style>
